<template>
  <div>
    <!--  条件查询-->
        <el-form :inline="true" label-width="80px "  :model="formInline"  label-position="right" class="demo-form-inline">
          <el-form-item label="请输入">
            <el-input v-model="formInline.menuName" placeholder="菜单名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getlist">查询</el-button>
            <el-button type="primary" @click="getexcel">excel导出</el-button>
            <el-button type="primary" @click="getechart">菜单类型统计</el-button>
          </el-form-item>

        </el-form>

    <!--  列表-->
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="menuName"
          label="名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="orderNum"
          label="排序"
          width="180">
      </el-table-column>
      <el-table-column
          prop="perms"
          label="权限标识"
          :show-overflow-tooltip="true"
          width="180">
      </el-table-column>
      <el-table-column
          prop="path"
          label="路由地址"
          width="180">
      </el-table-column>
      <el-table-column
          prop="component"
          label="组件路径"
          :show-overflow-tooltip="true"
          width="180">
      </el-table-column>
      <el-table-column
          label="是否缓存"
          width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isCache == 0">缓存</el-tag>
          <el-tag v-if="scope.row.isCache == 1">不缓存</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          width="80">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.statuss"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(scope.row.id,scope.row.statuss)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              class="el-icon-plus"
              @click="openadd(scope.row)">新增
          </el-button>
          <el-button
              size="mini"
              type="primary"
              class="el-icon-edit"
              @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="primary"
              class="el-icon-edit"
              @click="del(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
<div id="main" style="width: 1000px;height: 1000px;"></div>
    <!--  添加弹窗-->
    <el-dialog :title="title" :visible.sync="outerVisible">
      <el-form :model="form">
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="上级菜单" :label-width="formLabelWidth">
              <el-input v-model="form.parentName" @focus="openinner" ></el-input>
            </el-form-item>

          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="菜单类型" :label-width="formLabelWidth">
              <el-radio v-model="form.menuType" label="M">目录</el-radio>
              <el-radio v-model="form.menuType" label="C">菜单</el-radio>
              <el-radio v-model="form.menuType" label="F">按钮</el-radio>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="菜单名称" :label-width="formLabelWidth">
              <el-input v-model="form.menuName"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="显示顺序" :label-width="formLabelWidth">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="路由地址" :label-width="formLabelWidth">
              <el-input v-model="form.path"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="组件路径" :label-width="formLabelWidth">
              <el-input v-model="form.component"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row><el-row>
        <el-col :span="12"><div class="grid-content bg-purple">
          <el-form-item label="路由参数" :label-width="formLabelWidth">
            <el-input v-model="form.query"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <el-form-item label="权限标识" :label-width="formLabelWidth">
            <el-input v-model="form.perms"></el-input>
          </el-form-item>
        </div></el-col>
      </el-row><el-row>
        <el-col :span="12"><div class="grid-content bg-purple">
          <el-form-item label="是否缓存" :label-width="formLabelWidth">
            <el-radio v-model="form.isCache" label="0">缓存</el-radio>
            <el-radio v-model="form.isCache" label="1">不缓存</el-radio>
          </el-form-item>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <el-form-item label="菜单状态" :label-width="formLabelWidth">
            <el-radio v-model="form.visible" label="0">显示</el-radio>
            <el-radio v-model="form.visible" label="1">隐藏</el-radio>
          </el-form-item>
        </div></el-col>
      </el-row>
      </el-form>
      <el-dialog
          width="40%"
          title="菜单选择"
          :visible.sync="innerVisible"
          append-to-body>
        <el-tree :data="parentMenu" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="menuAdd">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      //条件查询参数
      formInline: {},
      //表格参数
      tableData: [],
      //外层弹窗
      outerVisible: false,
      //内嵌弹窗
      innerVisible: false,
      //外层弹窗表单
      form:{},
      formLabelWidth:"120px",
      title:'',
    defaultProps: {
      children: 'children',
          label: 'label'
    },
      parentMenu:[],


    }
  },
  methods: {
    //删除
    del(id){
    this.axios.delete("http://localhost:8004/sysmenu/del?id="+id).then(r=>{
      if(r.data.code == 200){
        this.$message.success("删除成功");
        this.getlist();
      }else{
        this.$message.error(r.data.msg);
      }
    })
    },
    //报表统计
    getechart(){
      this.axios.get("http://localhost:8004/sysmenu/getechart").then(r=>{
        console.log(r.data.data);
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: r.data.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
      })
    },
    //打开弹窗修改信息
    handleEdit(row){
      this.title="修改菜单信息";
      this.outerVisible=true;
      if (row.parentId !=0){
      this.axios.get("http://localhost:8004/sysmenu/getNameByParentId?parentId="+row.parentId).then(r=>{
        this.form=row;
        this.form.parentName=r.data.data;
      })
      }else {
        this.form=row;
        this.form.parentName="若依";
      }

    },
    //添加/修改
    menuAdd(){
      if (this.form.menuId !=null){
        this.axios.post("http://localhost:8004/sysmenu/menuUpdate",this.form).then(r=>{
          if (r.data.code == 200){
            this.$message.success("操作成功");
            this.outerVisible=false;
            this.getlist();
          }else {
            this.$message.error(r.data.msg);
          }
        })
      }else {
        this.axios.post("http://localhost:8004/sysmenu/menuAdd",this.form).then(r=>{
          if (r.data.code == 200){
            this.$message.success("操作成功");
            this.outerVisible=false;
            this.getlist();
          }
        })
      }

    },
    //给上级菜单赋值（可选）
    handleNodeClick(data) {
      console.log(data)
      this.form.parentId=data.id;
      this.form.parentName=data.name;
    },
    //获取菜单列表的树形结构
    getMenuTree(){
      this.axios.get("http://localhost:8004/sysmenu/getParentMenu").then(r=>{
        this.parentMenu=r.data.data;
      })
    },
    //打开内嵌弹窗
    openinner(){
      if (this.form.parentId !=0){
        this.innerVisible=true;
        this.getMenuTree();
      }else {
        this.$message.error("一级菜单，不可修改");
      }

    },
    //打开新增/修改窗口
    openadd(row) {
      this.form={};

    this.outerVisible=true;
    this.form.parentName=row.menuName;
    this.title="添加菜单";


    },
    //修改状态
    changeStatus(id, statuss) {
      this.axios.put("http://localhost:8004/sysmenu/updateStatus?id=" + id + "&statuss=" + statuss).then(r => {
        if (r.data.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error(r.data.msg);
          this.getlist();
        }
      })
    },
    //列表查询
    getlist() {
      this.axios.post("http://localhost:8004/sysmenu/list", this.formInline).then(r => {
        this.tableData = r.data.data;

      })
    },
    //导出excel表格
    getexcel() {
      location="http://localhost:8004/sysmenu/getexcel";
    }


  },
  created() {
    this.getlist();
  }
}
</script>

<style scoped>

</style>
